<!DOCTYPE html>
<html lang="en">

<head>
    <title>Index</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- link bootstrap.min.css -->
    <link href="./public/css/bootstrap.min.css" rel="stylesheet">

    <!-- add bootstrap plugin css file: notify: toastr.css -->
    <link rel="stylesheet" href="./public/css/toastr.css">

    <!-- custom css style -->
    <style>
        html { margin-bottom: 65px }

        label {
            font-weight: 100;
        }

        .debug {
            border: 1px dotted red;
        }

        a.cus-section {
            text-decoration: none;
            color: black;
        }

        a>div:hover {
            background-color: whitesmoke;
        }

        /* custom side nav bar style */
        .cus-side-nav-bar {
            border-left: 3px solid mediumseagreen; 
            padding: 5px 20px; 
            font-size: 1.5rem; 
            background-color: whitesmoke; 
            cursor: pointer
        }

        .cus-side-nav-bar:hover {
            transition: box-shadow .25s;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        }
    </style>
</head>

<body>

    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">MOOC</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="" data-toggle="modal" data-target="#intro_modal">Intro</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Username <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Settings</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </header>

    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <h3 style="margin-bottom: 20px;">All Courses</h3>
                <nav style="margin-bottom: 40px;" id="accordion">
                    <div style="margin-bottom: 5px;" class="panel">
                        <div class="cus-side-nav-bar" data-toggle="collapse" data-parent="#accordion" data-target="#chapter1">
                            Chapter-1
                        </div>
                        <div id="chapter1" class="collapse in">
                            <a class="cus-section">
                                <div style="padding-left: 23px; margin: 5px 0px;">
                                    <span class="glyphicon glyphicon-ok" style="color: mediumseagreen;"></span> &nbsp; Section-1
                                </div>
                            </a>
                            <a href="" class="cus-section">
                                <div style="padding-left: 23px; margin: 5px 0px;">
                                    <span class="glyphicon glyphicon-ok" style="color: mediumseagreen;"></span> &nbsp; Section-1
                                </div>
                            </a>
                            <a href="" class="cus-section">
                                <div style="padding-left: 23px; margin: 5px 0px;">
                                    <span class="glyphicon glyphicon-ok" style="color: mediumseagreen;"></span> &nbsp; Section-1
                                </div>
                            </a>
                        </div>
                    </div>
                    <div style="margin-bottom: 5px;" class="panel">
                        <div class="cus-side-nav-bar" data-toggle="collapse" data-parent="#accordion" data-target="#chapter2">Chapter-2</div>
                        <div id="chapter2" class="collapse">
                            <a href="" class="cus-section">
                                <div style="padding-left: 23px; margin: 5px 0px;">
                                    <span class="glyphicon glyphicon-ok" style="color: mediumseagreen;"></span> &nbsp; Section-1
                                </div>
                            </a>
                            <a href="" class="cus-section">
                                <div style="padding-left: 23px; margin: 5px 0px;">
                                    <span class="glyphicon glyphicon-time" style="color: orange"></span> &nbsp; Section-1
                                </div>
                            </a>
                            <a href="" class="cus-section">
                                <div style="padding-left: 23px; margin: 5px 0px;">
                                    <span class="glyphicon glyphicon-time" style="color: orange"></span> &nbsp; Section-1
                                </div>
                            </a>
                        </div>
                    </div>
                    <div style="margin-bottom: 5px;" class="panel">
                        <div class="cus-side-nav-bar" data-toggle="collapse" data-parent="#accordion" data-target="#chapter3">Chapter-3</div>
                        <div id="chapter3" class="collapse">
                            <a href="" class="cus-section">
                                <div style="padding-left: 23px; margin: 5px 0px;">
                                    <span class="glyphicon glyphicon-time" style="color: orange"></span> &nbsp; Section-1
                                </div>
                            </a>
                            <a href="" class="cus-section">
                                <div style="padding-left: 23px; margin: 5px 0px;">
                                    <span class="glyphicon glyphicon-time" style="color: orange"></span> &nbsp; Section-1
                                </div>
                            </a>
                            <a href="" class="cus-section">
                                <div style="padding-left: 23px; margin: 5px 0px;">
                                    <span class="glyphicon glyphicon-time" style="color: orange"></span> &nbsp; Section-1
                                </div>
                            </a>
                        </div>
                    </div>
                </nav>
            </div>

            <!-- main content. video, test & resources -->
            <div class="col-lg-9">
                <h3 style="margin-bottom: 20px;">First Chapter - Second Section</h3>
                <div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Video</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Test</a></li>
                        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Resources</a></li>
                    </ul>

                    <!-- Tab panes <--></-->
                    <div class="tab-content">

                        <!-- video tab -->
                        <div role="tabpanel" class="tab-pane fade in active" id="home" style="padding: 20px 5px;">
                            <!--<iframe width="100%" height="480" src="https://www.youtube.com/embed/CWnYIb2lqpo" frameborder="0" allowfullscreen></iframe>                                -->
                            <video width="100%" height="400" controls>
                                <source src="./public/videos/lalaland.mp4" type="video/mp4">
                            </video>
                            
                            <!-- intro -->
                            <div style="padding-top: 10px;">
                                <h4>Intro:</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora placeat magnam iure vero exercitationem, modi distinctio. Ex eaque rerum debitis, deserunt, dignissimos consectetur tempore praesentium modi inventore nobis nisi nihil.
                                </p>
                            </div>
                        </div>
                        
                        <!-- test tab -->
                        <div role="tabpanel" class="tab-pane fade" id="profile" style="padding-top: 15px;">
                            <div style="margin: 20px 0px 30px;">
                                <div style="border-left: 3px solid dodgerblue; padding: 0px 5px; margin: 10px;">
                                    <h4 style="padding-left: 20px;">1. Perm - Bruno Mars (24K Magic).</h4>
                                </div>
                                <div style="padding-left: 40px;">
                                    <form action="">
                                        <input type="radio" name="name_0" id="value_0"> <label for="value_0">value_0</label> <br/>
                                        <input type="radio" name="name_0" id="value_1"> <label for="value_1">value_1</label> <br/>
                                        <input type="radio" name="name_0" id="value_2"> <label for="value_2">value_2</label> <br/>
                                        <input type="radio" name="name_0" id="value_3"> <label for="value_3">value_3</label> <br/>
                                    </form>
                                </div>
                            </div>
                            <div style="margin: 20px 0px 30px;">
                                <div style="border-left: 3px solid orange; padding: 0px 5px; margin: 10px;">
                                    <h4 style="padding-left: 20px;">2. Talking To The Moon - Bruno Mars. (It's better if you don't understand).</h4>
                                </div>
                                <div style="padding-left: 40px;">
                                    <form action="">
                                        <input type="checkbox" name="name_0" id="value_5"> <label for="value_5">value_5</label> <br/>
                                        <input type="checkbox" name="name_0" id="value_6"> <label for="value_6">value_6</label> <br/>
                                        <input type="checkbox" name="name_0" id="value_7"> <label for="value_7">value_7</label> <br/>
                                        <input type="checkbox" name="name_0" id="value_8"> <label for="value_8">value_8</label> <br/>
                                    </form>
                                </div>
                            </div>
                            <div style="margin: 20px 0px 30px;">
                                <div style="border-left: 3px solid rgb(90, 202, 139); padding: 0px 5px; margin: 10px;">
                                    <h4 style="padding-left: 20px;">3. Another Day Of Sun - La La Land (Original Motion Picture Soundtrack).</h4>
                                </div>
                                <div style="padding-left: 40px;">
                                    <form action="">
                                        <input type="radio" name="name_0" id="value_30"> <label for="value_30">value_30</label> <br/>
                                        <input type="radio" name="name_0" id="value_31"> <label for="value_31">value_31</label> <br/>
                                        <input type="radio" name="name_0" id="value_32"> <label for="value_32">value_32</label> <br/>
                                        <input type="radio" name="name_0" id="value_33"> <label for="value_33">value_33</label> <br/>
                                    </form>
                                </div>
                            </div>
                            <div style="margin: 30px 40px 30px;">
                                <button class="btn btn-primary" onclick="toastr.success('Operation successed.')">Submit</button>&nbsp;&nbsp;
                                <button class="btn btn-default">Staged</button>
                            </div>
                        </div>

                        <!-- downlaod tab -->
                        <div role="tabpanel" class="tab-pane fade" id="messages">
                            <div style="border-left: 3px solid dodgerblue; padding: 2px 5px; margin: 20px;">
                                <span style="font-size: 15px; padding-left: 20px;">The_first_file_you_may_want_to_download.zip</span>
                                <button class="pull-right btn btn-sm btn-primary">Download</button>
                            </div>
                            <div style="border-left: 3px solid red; padding: 2px 5px; margin: 20px;">
                                <span style="font-size: 15px; padding-left: 20px;">The_first_file_you_may_want_to_download.zip</span>
                                <button class="pull-right btn btn-sm btn-primary">Download</button>
                            </div>
                            <div style="border-left: 3px solid mediumseagreen; padding: 2px 5px; margin: 20px;">
                                <span style="font-size: 15px; padding-left: 20px;">The_first_file_you_may_want_to_download.zip</span>
                                <button class="pull-right btn btn-sm btn-primary">Download</button>
                            </div>
                            <div style="border-left: 3px solid orange; padding: 2px 5px; margin: 20px;">
                                <span style="font-size: 15px; padding-left: 20px;">The_first_file_you_may_want_to_download.zip</span>
                                <button class="pull-right btn btn-sm btn-primary">Download</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <footer>
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <div class="nav-header">
                    <a class="navbar-brand" href="">MOOC</a>
                </div>
                <p class="navbar-text navbar-right">Footer</p>
            </div>
        </nav>
    </footer>

    <!-- modal space -->
    <!-- intro modal -->
    <div id="intro_modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #337ab7; color: white; border-top-left-radius: 5px; border-top-right-radius: 5px;">
                    <h4 class="modal-title">Mooc Intro</h4>
                </div>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                        Iure nemo perferendis, quaerat possimus. Delectus aut, 
                        quia minima veniam odio? Sunt culpa accusamus, 
                        blanditiis delectus veritatis praesentium eum ipsum officia minus.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Got it</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- basic js files -->
    <script src="./public/js/jquery-3.1.1.min.js"></script>
    <script src="./public/js/bootstrap.min.js"></script>

    <!-- add bootstrap plugin js file: notify: toastr.js -->
    <script src="./public/js/toastr.js"></script>

</body>

</html>